<template>
  <div class="use-array_filter">
    <description title="useArrayFilter" info="数组的方法，过滤"  :desc="details.desc" :param="details.param" :use="details.useDesc" />
    <p class="description-details">
      <span>数组：</span>
      <el-select v-model="arrayNum" style="width:250px">
        <el-option
        v-for="(item,index) in arrays"
        :key='index'
        :label="item.value"
        :value="item.value"></el-option>
      </el-select>
      <span style="margin-left:50px;">条件：</span>
      <el-select style="width: 250px;" v-model="condition">
        <el-option
        v-for="(item,index) in conditions"
        :key="index"
        :label="item.label"
        :value="item.value"></el-option>
      </el-select>
      <span style="margin-left: 20px">筛选结果: {{ result }}</span>
      <el-button
      style="margin-left: 20px;"
      type="primary"
      @click="filterResult"
      >筛选</el-button>
    </p>
  </div>
</template>
<script lang="ts" setup>
  import description from "@/components/description/index.vue"
  import { UseArrayEnums } from '@/shared/enums/array'
  import { useArrayFilter } from '@vueuse/core'
  import { ArrayConfig } from './config.ts'
  import {ref} from 'vue'
  const arrayNum = ref()
  const details = ref();
  details.value = new ArrayConfig(UseArrayEnums.USE_ARRAY_FILTER).getConfig()
  const condition  = ref()
  const result  = ref()
  const arrays = [
    {
      id: 1,
      value: '1,2,3,4,5'
    },
    {
      id: 2,
      value: '2,3,4'
    },
    {
      id: 3,
      value: '3,4,5'
    }
  ]
  const conditions = [
    {
        value: 1,
        label: '元素大于2'
    },
    {
        value: 2,
        label: '元素除2余0'
    },
    {
        value: 3,
        label: '元素小于2'
    },
    {
        value: 4,
        label: '元素大于5'
    }
  ]
  const filterResult = () => {
    if (condition.value == 1) {
      return result.value = useArrayFilter(arrayNum.value.split(',').map(Number), (i: any) => i > 2)
    }
    if (condition.value == 2) {
      return result.value = useArrayFilter(arrayNum.value.split(',').map(Number), (i: any) => i%2 == 0)
    }
    if (condition.value == 3) {
      return result.value = useArrayFilter(arrayNum.value.split(',').map(Number), (i: any) => i < 2)
    }
    if (condition.value == 4) {
      return result.value = useArrayFilter(arrayNum.value.split(',').map(Number), (i: any) => i > 5)
    }
  }
</script>